<template>
  <!-- 缺陷对比分析表 -->
  <div class="capacity">
    <!-- 搜索框 --> 
    <div class="capation_serch">
      <el-form class="table_serch">
        <div class="table_serch_labe" style="margin-left:10px">
          <div class="table_serch_labe_title" >机种</div>
               <Ariplandown  style="margin-left:5px"  :modlulist="modlulist"  :formInline="formInline" ></Ariplandown>
        </div>

        <div class="table_serch_labe" style="margin-left:-20px">
          <div class="table_serch_labe_title">班次</div>
          <el-form-item label="">
              <el-select
                  v-model="formInline.class"
                  clearable
                  size="mini"
                  style="margin-left: 5px; margin-top: 0px; width: 140px"
                  placeholder="请选择内容"
                    >
                    <el-option label="白班"  value="白班"></el-option>
                    <el-option label="夜班"  value="夜班"></el-option>
                  </el-select>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left:-25px">
          <div class="table_serch_labe_title">起始日期1</div>
          <el-form-item label="">
             <!-- <StartTime :formInline="formInline"></StartTime> -->
            <el-date-picker
              size="mini"
              v-model="formInline.starttime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
              style="width: 140px; margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: -17px">
          <div class="table_serch_labe_title" >
            结束日期1
          </div>
          <el-form-item label="">
              <el-date-picker
              size="mini"
              v-model="formInline.endtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
              style="width: 140px; margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0%">
          <div class="table_serch_labe_title">起始日期2</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="formInline.starttime1"
              type="date"
              placeholder="选择日期"
              style="width: 140px; margin-left: 8px"
              :picker-options="pickerOptions2"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe"  style="margin-left: 0%">
          <div class="table_serch_labe_title end_time2" style="margin-left:0px">
            结束日期2
          </div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="formInline.endtime1"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions3"
              style="width: 135px; margin-left: 6px"
            >
            </el-date-picker>
          </el-form-item>
        </div>
          
         <div class="table_serch_labe" style="margin-left: 10px">
          <div class="table_serch_labe_title" >线体</div>
            <Linedrpdown style="margin-left:5px" 
            @change='onchange'
            :linedroplist="linedroplist" :formInline="formInline"></Linedrpdown>
               
        </div>

        <div class="table_serch_labe" style="margin-right: 66%">
          <div class="table_serch_labe_title">设备</div>
               <el-select
                  v-model="formInline.site"
                  clearable
                  size="mini"
                  style="margin-left: 5px; margin-top: 8px; width: 140px"
                  placeholder="请选择内容"
                >
                  <el-option v-for="(item,index) in this.siteItems" :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
        </div>


        <div class="table_serch_labe" style="margin-left:0%">
          <el-button 
          type="primary"
            size="mini"
           style="height:30px;margin-top:5px"
           @click="Defectcontrast">查询</el-button>
          <!-- <el-button type="mini">刷新</el-button>
          <el-button type="mini">运行</el-button> -->
        </div>
      </el-form>
    </div>

    <div class="hader_cent">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="良率/产能对比分析" name="first">
          <!-- 折线图  1-->
          <div id="capaction_one"></div>
           <div id="capaction_two"></div>
        </el-tab-pane>
        <!-- <el-tab-pane label="产能对比分析" name="second"> -->
          <!-- 折线图 2 -->
        
        <!-- </el-tab-pane> -->
      </el-tabs>
    </div>
    <!-- 列表 -->
    <div class="capaction_list">
      
    </div>

    <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中.......</div>
      <div class="table_timer">请求延时:{{ timer }}</div>
    </div>


    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>

<script>
import Linedrpdown from '../../../components/Linedropdown/Linedropdown'
import Ariplandown from '../../../components/Airplandown/Airplandown'
// import Endtime from '../../../components/endTime/Endtime'
// import StartTime from '../../../components/StarTime/StartTime'
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: { 
    Popup,Ariplandown ,Linedrpdown,
    // Endtime,
    // StartTime
  },
  data() {
    return {
      Popup_show: false,
      timer: 0,
      isshow: false,
      activeName: "first",
      valtimer: "",
      list: [],
        pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
        pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
        pickerOptions3: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      formInline: {
        recipe: "",
        order: "",
        line: "",
        site: "",
        starttime: "",
        endtime: "",
        starttime1: "",
        endtime1: "",
        errorcode: "",
        class: "",
        personid: "",
        type: [],
      },
      options: [],
      restaurants: [],
      continuedata: [],
      contiondata2: [],
      continout1: [],
      continout2: [],
      modlulist:[],
       linedroplist:[],
      sitedrwn:[],
      siteItems:[],
    };
  },
  mounted() {
    // this.list = this.tasy.tableData;
    this.getModelnolist()
    
    // this.restaurants = this.loadAll();
  },
  methods: {

      onchange(){
     this.siteItems=[]
          this.sitedrwn.forEach((ele)=>{
            if(ele.ID.includes(this.formInline.line)){
              this.siteItems.push(ele.ID)
            }
         })
    },

      getModelnolist(){
        this.ajax(`func/1023/selProductList`).then((res)=>{
          if(res.status == 200){
             this.modlulist = res.data.product;
             this.linedroplist = res.data.line;
             this.sitedrwn = res.data.eqp;
          }
        })
      },

    removetmer() {
      this.isshow = false;
      clearInterval(this.valtimer);
      this.timer = 0;
    },

    //计时器
    timerclick() {
      this.valtimer = setInterval(() => {
        this.isshow = true;
        this.timer++;
      }, 1000);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
   
      ///查询请求方法
    Defectcontrast() {
      if (this.formInline.recipe == "") {
         this.$message({
                showClose: true,
                message: "机种不能为空",
                type: "warning",
              });
      } else if (this.formInline.starttime == "") {
          this.$message({
                showClose: true,
                message: "起始日期1不能为空",
                type: "warning",
              });
      } else if (this.formInline.endtime == "") {
           this.$message({
                showClose: true,
                message: "结束日期1不能为空",
                type: "warning",
              });
      } else if (this.formInline.starttime1 == "") {
           this.$message({
                showClose: true,
                message: "起始日期2不能为空",
                type: "warning",
              });
      } else if (this.formInline.endtime1 == "") {
         this.$message({
                showClose: true,
                message: "结束日期2不能为空",
                type: "warning",
              });
      } else if (this.formInline.endtime < this.formInline.starttime) {
          this.$message({
                showClose: true,
                message: "结束日期不能小于起始日期",
                type: "warning",
              });
      } else if (this.formInline.endtime1 < this.formInline.starttime1) {
          this.$message({
                showClose: true,
                message: "结束日期2不能小于起始日期2",
                type: "warning",
              });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url:`prod/1007?starttime=${this.formInline.starttime}&endtime=${this.formInline.endtime}&recipe=${this.formInline.recipe}&line=${this.formInline.line}&site=${this.formInline.site}&class=${this.formInline.class}&order=${this.formInline.order}&personid=${this.formInline.personid}&starttime1=${this.formInline.starttime1}&endtime1=${this.formInline.endtime1}&errorcode=${this.formInline.errorcode}`,
          method: "GET",
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          var reult = res.data;
            // console.log('------------------',reult);
          if (reult) {
            this.continuedata = reult.Quality1;
            this.contiondata2 = reult.Quality2;
            this.continout1 = reult.out1;
            this.continout2 = reult.out2;
            if (this.continuedata) {
              this.capaction_one();
              this.capaction_two();
            }
            //  setTimeout(() => {
            //   if (this.continuedata) {
            //     this.Popup_show = true;
            //     this.Popup_timer = setInterval(() => {
            //       this.timer++;
            //     }, 1000);
            //     } else {
            //     return;
            //   }
            // }, 25000);
           } 
        });
      }
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    cancelget() {
      console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    //  折线图 1
    capaction_one() {
      let capaction_one = this.$echarts.init(
        document.getElementById("capaction_one")
      );
      let capactionls1 = this.continuedata;
      let capactionts2 = this.contiondata2;
      var datakey = [];
      var dataval = [];
      for (let i = 0; i < capactionts2.length; i++) {
        datakey.push(capactionts2[i].day);
        dataval.push(capactionts2[i].Quality);
        //  console.log('--------------',capactionts2[i].Quality)
      }
      var capactionlsname = [];
      var capactionlsval = [];
      for (let i = 0; i < capactionls1.length; i++) {
        capactionlsname.push(capactionls1[i].day);
        capactionlsval.push(capactionls1[i].Quality);
      }
      //  console.log('第二个折线图',capactionlsval)
      // console.log(continuedata)
      capaction_one.setOption({
        title:[
           {
              text: "良率",
              x: "center",
              y: "30",
              textStyle: {
                fontSize: 20,
                fontWeight: 300,
              },
             },
             {
                subtext:"纵轴单位(百分比)",
                subtextStyle:{
                align:"left",
                lineHeight: 76,
                fontSize:10,
                  padding: 15,
               }
             }
        ],
        xAxis: {
          type: "category",
          data: [
             "1(日)",
            "2(日)",
            "3(日)",
            "4(日)",
            "5(日)",
            "6(日)",
            "7(日)",
            "8(日)",
            "9(日)",
            "10(日)",
            "11(日)",
            "12(日)",
            "13(日)",
          ],
          axisLabel: {
            textStyle: {
              fontSize: 8,
            },
          },
        },
        legend: {
          data: ["条件一", "条件二"],
          right: "10%",
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
          axisLabel: {
               formatter:'{value}%',
              },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%",
        },
        series: [
          {
            name: "条件一",
            data: capactionlsval,
            type: "line",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter:'{c}%'
                },
              },
            },
          },
          {
            name: "条件二",
            data: dataval,
            type: "line",
            itemStyle: {
              color: "#5793f3",
              normal: {
                lineStyle: {
                  color: "#0000FF",
                },
                label: {
                  show: true,
                  formatter:'{c}%'
                },
              },
            },
          },
        ],
      });
    },

    // 折线图 2
    capaction_two() {
      let capaction_two = this.$echarts.init(
        document.getElementById("capaction_two")
      );
      var densitya = this.continout1;
      var densityb = this.continout2;
      console.log(densitya);
      var denval = [];
      var denkey = [];
      for (let i = 0; i < densitya.length; i++) {
        denval.push(densitya[i].outPut);
        denkey.push(densitya[i].day);
      }
      var denvalin = [];
      for (let i = 0; i < densityb.length; i++) {
        denvalin.push(densityb[i].outPut);
      }
      capaction_two.setOption({
        title: 
        [{
          text: "产能",
          x: "center",
          y: "30",
          textStyle: {
            fontSize: 20,
            fontWeight: 300,
          },
        },
          {
                subtext:"纵轴单位(片数)",
                subtextStyle:{
                align:"left",
                lineHeight: 76,
                fontSize:10,
                  padding: 15,
               }
             }
        ],
        xAxis: {
          type: "category",
          data: [
            "1(日)",
            "2(日)",
            "3(日)",
            "4(日)",
            "5(日)",
            "6(日)",
            "7(日)",
            "8(日)",
            "9(日)",
            "10(日)",
            "11(日)",
            "12(日)",
            "13(日)",
          ],
          axisLabel: {
            textStyle: {
              fontSize: 8,
            },
          },
        },
        legend: {
          data: ["条件一", "条件二"],
          right: "10%",
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        tooltip: {
          trigger: "axis",
          // formatter: "{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />",
        },
        series: [
          {
            name: "条件一",
            data: denval,
            type: "line",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
          },
          {
            name: "条件二",
            data: denvalin,
            itemStyle: {
              color: "#5793f3",
              normal: {
                lineStyle: {
                  color: "#0000FF",
                },
                label: {
                  show: true,
                },
              },
            },
            type: "line",
          },
        ],
      });
    },

    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>

<style  scoped>
.capacity {
  width: 100%;
  /* border: 1px solid #000; */
}
.capation_serch {
  width: 100%;
   box-shadow: 0px 0px 0px 1.5px #c9c8c8;
   border-radius:5px 5px 5px 5px;
   background:#ffffff;
  /* border: 1px solid red; */
}
#capaction_one {
  width: 1300px;
  height: 49.6vh;
  margin-top: 10px;
  margin-left:0%;
  background: #ffffff;
   /* box-shadow: 0px 0px 0px 1.5px #c9c8c8; */
   border-radius:5px 5px 5px 5px;
  /* border:1px solid #000; */
}
#capaction_two {
  width: 1300px;
  height:49.6vh;
  margin-top: 10px;
  margin-left:0%;
  background: #ffffff;
   /* box-shadow: 0px 0px 0px 1.5px #c9c8c8; */
   border-radius:5px 5px 5px 5px;
  /* border:1px solid #000; */
}
.capaction_list {
  width: 100%;
  /* border: 1px solid blue; */
  margin-top: 10px;
  background: #ffffff;
}

.table_serch {
  width: 100%;
  min-width: 800px;
  padding-top: 8px;
  /* border: 1px solid red; */
  /* background: #fff; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}

.hader_cent {
  width: 100%;
  background: #fff;
  margin-top: 30px;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius:5px 5px 5px 5px;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 40%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}


/* 笔记本全屏 */
/* @media screen and (min-width:1920px) {
   .end_time2
   {
      margin-left:0px;
   }
} */
</style>